<template>
  <div class="container blog">
    <div class="banner-frame">
      <img src="@/assets/imgs/blog-banner.png" />
      <div class="banner-modal">
        <h1 class="title">BLOGS</h1>
      </div>
    </div>
    <div class="blog-frame">
      <van-tabs v-model="navIndex" @click="clickTab" color="#000">
        <van-tab
          v-for="(item, index) in blogTree"
          :key="'col' + index"
          :title="item.name"
        >
          <div class="blog-panel">
            <nuxt-link
              class="blog-fast"
              v-for="(item, index) in blogList"
              :to="'/blog/' + item.id"
              :key="'blog' + index"
            >
              <div class="img-frame col-sm-12 col-md-6">
                <van-image lazy-load fit="cover" :src="item.photo_brief" />
              </div>
              <div class="info-frame col-sm-12 col-md-6">
                <div class="info-auth">
                  <span class="name">{{ item.author }}</span>
                  <span class="time">{{
                    item.created_at.substring(0, 10)
                  }}</span>
                </div>
                <div class="blog-title">
                  {{ item.title }}
                </div>
                <div class="blog-abstract">
                  {{ item.description }}
                </div>
                <div class="tips-frame">
                  <div class="tips"></div>
                </div>
                <div class="blog-bottom">
                  <span
                    >{{ item.views }} views &nbsp;&nbsp;&nbsp; Write a
                    comment</span
                  >
                  <img class="icon" src="@/assets/imgs/love.png" />
                </div>
              </div>
            </nuxt-link>
          </div>
          <Loading v-if="loading" />
          <Nodata v-if="blogList.length == 0 && !loading" />
        </van-tab>
      </van-tabs>
    </div>
    <van-pagination
      v-model="blogForm.page"
      :total-items="proTotal"
      :items-per-page="blogForm.page_size"
      :show-page-size="5"
      class="col-sm-12 col-md-8 col-lg-6 col-xl-4"
      style="margin-top: 1rem"
      v-if="proTotal > blogForm.page_size && !loading"
      @change="pageChange"
    >
      <template #prev-text>
        <van-icon name="arrow-left" />
      </template>
      <template #next-text>
        <van-icon name="arrow" />
      </template>
      <template #page="{ text }">{{ text }}</template>
    </van-pagination>
  </div>
</template>
<script>
import blog from "./blog.js";
export default {
  mixins: [blog.mixin],
};
</script>
<style lang="less" scoped>
@import "blog.less";
</style>